<template>
	<div class="tree-container">
		<fx-tree
			ref="tree"
			:treeData="treeData"
			:defaultProps="treeProps"
			showTreeNodeIcon
			:showCheckbox="showCheckbox"
			:showTreeWidthExtendBtn="showTreeWidthExtendBtn"
      :treeNodeIcon="getTreeNodeIcon"
			@node-click="onTreeItemClick"
			@check="onTreeCheck"
		>
		</fx-tree>
	</div>
</template>
<script>
export default {
	name: 'treeContainer',
	props: {
		readonly: Boolean,
		data: {
			type: Array,
			default: () => {
				return []
			}
		},
		showCheckbox: Boolean,
		showTreeWidthExtendBtn: {
			type: Boolean,
			default: true
		}
	},
	data () {
		return {
			treeProps: {
				children: 'children',
				label: 'name'
			},
			treeData: [],
			showAll: false
		}
	},
	watch: {
		data: {
			immediate: true,
			handler (val) {
				if (val[0]) {
					val[0].enableFlag = 1
				}
				this.treeData = val
				this.$nextTick(() => {
					this.$refs.tree.filter(this.showAll)
				})
			}
		}
	},
	methods: {
		getTreeData () {
			return this.$fxApi('material.findMaterialTypeTree').then(res => {
				this.treeData = res
				return Promise.resolve()
			})
		},
		getTreeNodeIcon (data) {
			return 'organ-supplier-type'
		},
		onRefreshTree () {
			this.getTreeData()
		},
		getTreeLv (data) {
			if (data.treeType === 'root') {
				return ''
			} else {
				return `${data.organLevel}-${data.id}`
			}
		},
		onTreeItemClick (data, node) {
			this.$emit('on-tree-item-click', this.getTreeLv(data))
		},
		getCurrentNode () {
			return this.$refs.tree.getCurrentNode()
		},
		getCurrentNodeTreeLv () {
			const node = this.$refs.tree.getCurrentNode()
			return node ? this.getTreeLv(node) : ''
		},
		onTreeCheck (data, treeCheckData) {
			this.$emit('check', data, treeCheckData)
		},
		clearSearchInput () {
			this.$refs.tree.clearSearchInput()
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.tree-container {
	display: flex
}
.fx-tree-tools-popover {
	.tree-node-tools-item {
		font-size: 12px
		height: 24px;
		line-height: 24px;
		display: flex;
		align-items: center;
		cursor: pointer
		&:hover {
			color: $fxDefaultColor
		}
		.tree-tools-icon {
			width: 20px
			height: 20px
			margin-right: 5px
		}
	}
}
</style>
